<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>w1d1家庭作业</title>
  </head>

  <body>
    <!-- 
      // 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
      // ·在input中采集用户输入的小时数，点击按钮时弹窗运算结果；（选做）
      -->
    <!-- <script>
      var hours = 89;

      // 计算零头小时
      var oddHours = 89 % 24;
      console.log("oddHours=", oddHours);

      // 计算完整天数

      /* 算法1 */
      // var days = (hours - oddHours)/24
      // console.log("days=",days);

      /* 算法2 */
      // var temp = hours / 24 //3.71
      // var odd = temp % 1//0.71
      // var days = temp - odd //3
      // console.log("days=",days);

      /* 算法3 */
      // parseInt(n)对n取整
      var days = parseInt(hours / 24);
      console.log("days=", days);
    </script> -->

    <!-- 
      // 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
      // 它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
      // 提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)。
      // ·在input中采集用户输入的摄氏度，点击按钮时弹窗显示华氏温度（选做）
    -->
    <!-- <script>
      // 摄氏度 = 5/9.0*(华氏度-32)
      // 华氏度 = 9/5 * 摄氏度 + 32

      // var hsd = 80
      // var ssd = 5/9 * (80-32)
      // console.log("ssd=",ssd);

      var ssd = 26.7
      var hsd = 9/5 * ssd + 32
      console.log("hsd=",hsd);

    </script> -->

    <input type="text" value="12345" placeholder="骚年请输入摄氏温度" id="ipSsd"> = <span id="spHsd"></span>℉ <button id="btn1">转华氏</button>
    <hr>
    <input type="text" placeholder="骚年请输入华氏温度"> = <span></span>℃ <button id="btn2">转摄氏</button>
    
    <script>
      btn1.onclick = function(){
        // 拿到用户输入的摄氏温度
        var ssd = ipSsd.value
        console.log("ssd=",ssd,typeof(ssd));

        // 调用公式求对应的华氏温度
        // 华氏度 = 9/5 * 摄氏度 + 32
        // number与字符串ssd做运算 ssd被隐式转为了number
        var hsd = 9/5 * ssd + 32
        console.log("hsd=",hsd,typeof(hsd));

        // 将华氏温度无情地显式在span身上
        // spHsd.innerText = hsd
        spHsd.innerText = hsd.toFixed(1)
      }
    </script>
</body>
</html>
